@import '../src/common/style/_variables.less';
@import '../src/common/style/theme/_index.less';

page {
  background-color: var(--ui-bg-color-page);

  --bg-color-demo-desc: var(--ui-text-color-secondary);
  --bg-color-demo-title: var(--ui-text-color-primary);
  --bg-color-demo: var(--ui-bg-color-container);
  --bg-color-demo-secondary: var(--ui-bg-color-container);
  --ui-navbar-bg-color: var(--ui-bg-color-page);
  --ui-navbar-color: var(--ui-text-color-primary);
  --ui-progress-circle-inner-bg-color: var(--bg-color-demo);
}

.skyline {
  display: flex;
  flex-direction: column;
  height: 100vh;

  .scroll-view {
    flex: 1;
    height: 0;
  }
}

.demo {
  padding-bottom: 56rpx;

  &-navbar {
    --ui-navbar-bg-color: var(--ui-bg-color-container);
    --ui-navbar-color: var(--ui-text-color-primary);
  }

  &-title {
    font-size: 48rpx;
    font-weight: 700;
    line-height: 64rpx;
    margin: 48rpx 32rpx 0;
    color: var(--bg-color-demo-title);
  }

  &-desc {
    font-size: 28rpx;
    color: var(--bg-color-demo-desc);
    margin: 16rpx 32rpx 0;
    line-height: 44rpx;
  }
}
